<template>
	<view>
		<view id="app" class="app-height buyersVideo connaught-style" >
			<view class="tabs">
				<view class=" item" :class="[index==3?'active':'']"  @click="tabsClick(3)" >审核中<view class="span"></view></view>
				<view class=" item" :class="[index==0?'active':'']"  @click="tabsClick(0)" >已发布<view class="span"></view></view>
				<view class=" item" :class="[index==5?'active':'']"  @click="tabsClick(5)" >被驳回<view class="span"></view></view>
				<view class=" item" :class="[index==4?'active':'']"  @click="tabsClick(4)" >已下架<view class="span"></view></view>
			</view>
			<!-- 审核中 -->
			<view  class="live-broadcast" v-if="index==3">
				<view class="item" v-for="demand in demandList">
					<view class="good-info">
						<view class="blue"></view>
					   <view class="caigou">采购:{{demand.shortTitle}}</view>
					   <view class="bq-list">
					       <view class="biaoqian" v-for="ss in demand.tagList">
					  	      {{ss.tagName}}
				            </view>
				        </view>
						<view class="ID">ID:{{demand.id}}</view>
						<view class="createAt">{{demand.createAt}}</view>
				</view>
			</view>
			</view>
			<!-- 已发布 -->
			<view class="live-broadcast" v-if="index==0">
				<view class="item" v-for="demand in demandList">
					<view class="good-info">
						<view class="blue"></view>
						<view class="renzheng">
							<view class="caigou">采购:{{demand.shortTitle}}</view>
				
					<!-- 	<image class="tupian"  v-if="demand.ifAttestation  == 1" src="http://test.noctech.cn/statics/js/modules/h5/img/renzheng.png" mode=""></image> -->
						</view>
						<view class="status">
							<image v-if="demand.ifAttestation == 1" class="rightImg" src="https://m.nocexpo.com/statics/js/modules/h5/img/pipeizhong.png" mode="heightFix" />
							<image v-else-if="demand.ifAttestation == 2" class="rightImg" src="https://m.nocexpo.com/statics/js/modules/h5/img/duijiezhong.png" mode="heightFix" />
							<image v-else-if="demand.ifAttestation== 3" class="rightImg" src="https://m.nocexpo.com/statics/js/modules/h5/img/chenggong.png" mode="heightFix" />
							<image v-else-if="demand.ifAttestation == 4" class="rightImg" src="https://m.nocexpo.com/statics/js/modules/h5/img/yicaigou.png" mode="heightFix" />
						</view>
						<view class="bq-list">
						    <view class="biaoqian" v-for="ss in demand.tagList">
							{{ss.tagName}}
						     </view>
						 </view>
							<view class="ID">ID:{{demand.id}}</view>
							<view class="createAt">{{demand.createAt}}</view>
							<view class="btn" >
							    <view style="display: flex;margin-left: 326rpx;margin-top: -50rpx;">
							       <view class="delNews" @tap.stop="delVideo(demand.id)">删除</view>
								   <view class="downNews" @tap.stop="demandManage(4,demand.id)">下架</view>
							    </view>
							</view>
					    </view>
				</view> 
			</view>
			<!-- 被驳回 -->
			<view class="live-broadcast" v-if="index==5">
				<view class="item" v-for="demand in demandList">
					<view class="good-info">
						<view class="blue"></view>
					   <view class="caigou">采购:{{demand.shortTitle}}</view>
					   <view class="bq-list">
					       <view class="biaoqian" v-for="ss in demand.tagList">
					  	      {{ss.tagName}}
					        </view>
					    </view>
						<view class="ID">ID:{{demand.id}}</view>
						<view class="createAt">{{demand.createAt}}</view>
						<view class="btn" >
						    <view style="display: flex;margin-left: 326rpx;margin-top: -50rpx;">
						        <view class="delNews" @tap.stop="delVideo(demand.id)">删除</view>
								<view class="downNews" :class="[demand.delFlag == 2?'disableBtn':'']" @click.stop="editDemands(demand)">编辑</view>
						    </view>
						</view>
			     	</view>
				</view>
			</view>
			<!-- 已下架 -->
			<view class="live-broadcast" v-if="index==4">
				<view class="item" v-for="demand in demandList">
					<view class="good-info">
						<view class="blue"></view>
					   <view class="caigou">采购:{{demand.shortTitle}}</view>
					   <view class="bq-list">
					       <view class="biaoqian" v-for="ss in demand.tagList">
					  	      {{ss.tagName}}
					        </view>
					    </view>
						<view class="ID">ID:{{demand.id}}</view>
						<view class="createAt">{{demand.createAt}}</view>
						<view class="btn" >
						    <view style="display: flex;margin-left: 326rpx;margin-top: -50rpx;">
						        <view class="delNews" @tap.stop="delVideo(demand.id)">删除</view>
								<view class="downNews" :class="[demand.delFlag == 3?'disableBtn':'']" @click.stop="editDemands(demand)">编辑</view>
						    </view>
						</view>
			     	</view>
				</view>
			</view>
	        <!-- 判断是否为空状态 -->
			<view  v-if="demandList.length==0">
				<image  class="tu" :src="imgUrl + '/statics/js/modules/h5/img/noData.png'" mode=""></image>
				<view class="tu1">您还没有发布需求呢~</view>
				<view class="tu3" @click="fabu">前往发布需求</view>
			</view>
		</view>	 
	</view>
</template>

<script>
import matchApi from '@/api/match.js';
import commonApi from '@/utils/commonMethod.js';
import personHeader from "../../components/person/personHeader.vue";
import indexApi from '@/utils/request/index.js'

export default {
	components: {
		personHeader
	},
	data() {
		return {
			register: false,//登录
			release:false,
			shade:false,
			search: {
				page: 1,
				limit: 10,
			},
			index:3,
			demandList: [],
			loading: true,
			noMore: false,
			noData: false,
			currentUser: {},
			ids: [],
			checkedArr:[],
			allChecked: false,	
			showCheck: false,
			scrollTop: 0,
			totalPage:0,
			
			startTime:'', //进入页面时间
			endTime:'',//离开页面时间
			currentUrl:'',//当前页面全路径
			imgUrl: indexApi.baseUrl,
			
		}
	},
	async created() {
		this.register =await commonApi.getUserLoginFlag()
		//获取当前用户
		const currentPromise = await commonApi.currentUserAxios()
		this.currentUser = currentPromise.data.session_user_h5
		this.query();
	},
	onShow(){
		
		setTimeout(()=> {
			
			if (getApp().globalData.onShow) {
				getApp().globalData.onShow = 0;
				console.log("demo前后台切换之切到前台")
			}
			else {
				console.log("demo页面被切换显示")
				this.startTime = +new Date();
			}
			
		}, 100);
	},
	onHide(){
		setTimeout(() => {
			var that = this
			if (getApp().globalData.onHide) {
				getApp().globalData.onHide = 0;
				console.log("还在当前页面活动")
			}
			else {
				that.endTime = +new Date();
				console.log("demo页面停留时间：" + (that.endTime - that.startTime))
				var stayTime = Math.round((that.endTime - that.startTime)/1000);
			   //这里获取到页面停留时间stayTime，然后了可以上报了
			   this.saveFootPrint(stayTime);
			}
		}, 100)
	},
	onUnload(){
		setTimeout(() => {
			var that = this
			if (getApp().globalData.onHide) {
				getApp().globalData.onHide = 0;
				console.log("还在当前页面活动")
			}
			else {
				that.endTime = +new Date();
				console.log("demo页面停留时间：" + (that.endTime - that.startTime))
				var stayTime = Math.round((that.endTime - that.startTime)/1000);
			   //这里获取到页面停留时间stayTime，然后了可以上报了
			   this.saveFootPrint(stayTime);
			}
		}, 100)
		uni.navigateBack()
	},
	mounted() {
		const pages = getCurrentPages()
		const currentPage =pages[pages.length - 1]
		this.currentUrl = currentPage.$page.fullPath
	},
	methods: {
	  // 删除
		delVideo(res){
			console.log(res,'99')
			let aa =res
			uni.showModal({
				title: "",
				content: "是否删除",
				showCancel:true,
				success: function (res) {
					var that = this
					if (res.confirm) {
						console.log(aa)
						matchApi.delDemand(aa).then(res=>{
							console.log(res);
							this.demandList = [];
							this.query()
						})
						console.log('用户点击确定');
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}.bind(this)
			});
			
		},
		fabu(){
			uni.navigateTo({
		        url:"/pages/tabBar/new/newDemand"
	        })	    
		},
		saveFootPrint(stayTime){
			commonApi.saveFootPrint(this.currentUser.id,this.startTime,stayTime,this.currentUrl,"我的需求")
			
		},
		tabsClick(e) {
			this.demandList=[];
			this.index= e;
			this.query();
		},
		scroll(e) {
			this.scrollTop = e.detail.scrollTo;
			this.$store.dispatch('renewScrollTop', e.detail.scrollTop);
		},
		onRefresh() {
			if(this.search.page <= this.totalPage){
				this.search.page;
				this.$refs.hint.setStatus('loading');
				console.log("还有下一页" + this.search.page);
				this.query();
			}else{
				this.$refs.hint.setStatus('loadingComplete');
				console.log("没有下一页")
			}
		},
		changeCheckbox(e){
			this.checkedArr = e.detail.value;
		},
		allChoose(e){
			 let chooseItem = e.detail.value;
			// 全选
			if(chooseItem[0]=='all'){
				this.allChecked = true;
				for(let item of this.demandList){
					let itemVal = String(item.id);
					if(!this.checkedArr.includes(itemVal)){
						this.checkedArr.push(itemVal);
					}
				}                    
			}else{
				// 取消全选
				this.allChecked=false;
				this.checkedArr=[];
			}
		},
		
		query() {
			matchApi.query(this.search.page=1,this.search.limit,this.currentUser.id,this.index).then(res => {
					if (res.data.page.list.length > 0) {
						this.noData = false;
						let resList = res.data.page.list;
						if(this.search.page == 1 && resList.length == 0){
							this.$refs.hint.setStatus('noData');
						}
						for (let i = 0; i < resList.length; i++) {
							let demand = resList[i];
							this.$set(demand, "shortTitle", demand.title.substr(0, 17));
							if(resList[i].tagList){
								for (let j = 0; j < resList[i].tagList.length; j++) {
									resList[i].tagList[j].tagName = '#' + resList[i].tagList[j].tagName;
								}
							}
						}
						this.demandList = this.demandList.concat(resList);
						this.totalPage = res.data.page.pages
						this.search.page++
					} else {
						this.loading = false
						if (this.search.page == 1) {
							this.noData = true
							this.noMore = false
						} else {
							this.noMore = true
						}
					}
					if (res.data.page.list.length > 0 && res.data.page.list.length < 10) {
						this.loading = false
						this.noMore = true
					}
			})
		},
		searchMatchResult(demand) {
			if(demand.delFlag == 2){
				return;
			}
			uni.navigateTo({
				url: '/pages/need/detail/detail?demandId=' + demand.id
			})
		},
		editDemands(demand) {
			if(demand.delFlag == 2){
				return;
			}
			console.log("跳转到编辑页面，和上传页面一样，但不是一个");
			uni.navigateTo({
				url: '/pages/need/edit/editDemand?demandId=' + demand.id
			})
			// window.location.href = "editDemand.html?demandId=" + demand.id
		},
		communicate(demand){
			if(demand.delFlag == 2){
				return;
			}
			console.log("h5跳转页面空白");
			// window.location.href='communicationDemand.html?demandId=' + demand.id
		},
		manage() {
			this.showCheck = !this.showCheck
			// $(".fixed-set").toggle();
			// $(".tui-checkbox").toggle();
		},
		selectAll() {
			if ($("#selectAll").is(':checked')) {
				$("input[name='selectbody']").prop("checked", true);
			} else {
				$("input[name='selectbody']").prop("checked", false);
			}
		},
		demandManage(item,res) {
			let aa =res
			var content;
			var url;
			
			if(2 == item){
				content = '您确定将选中的需求重新置顶吗？';
				url = "/h5/nocdemand/manage?flag=unresolved";
				
			}else if(1 == item) {
				content = '您确定将选中的需求“已解决”吗？';
				url = "/h5/nocdemand/manage?flag=resolved";
			}else if(3 == item) {
				content = '您确定将选中的需求“下架”吗？';
				url = "/h5/nocdemand/manage?flag=close";
			}
			else if(4 == item) {
				content = '您确定将选中的需求“删除”吗？';
				url = "/h5/nocdemand/manage?flag=down";
			}
			
			uni.showModal({
				title: "", //标题
				content: content, //内容
				showCancel:true, //是否显示取消按键
				success: function (res) {
					var that = this
					if (res.confirm) {  //点击确定
						matchApi.demandManage(url,[aa]).then(response =>{
							uni.showModal({
								title: "", //标题
								content: "操作成功", //内容
								showCancel:false, //是否显示取消按键
								success: function (res) {
									if (res.confirm) {  //点击确定
										console.log('用户点击确定');
									} else if (res.cancel) { // 点击取消
										console.log('用户点击取消');
									}
								} //success 中this不是当前vue文件，需要绑定this,配合 var that = this
								  //用that 调用 vue 中的数据
							});
							
							this.demandList = [];
							this.search.page = 1;
							this.showCheck = false;
							this.query();
						})
				
						console.log('用户点击确定');
					} else if (res.cancel) { // 点击取消
						console.log('用户点击取消');
					}
				}.bind(this) //success 中this不是当前vue文件，需要绑定this,配合 var that = this
				  //用that 调用 vue 中的数据
			});
		},
	},
	
}
</script>

<style lang="scss" scoped>
	.btn-set {
	    width: 82rpx;
	    font-size: 11px;
	    height: 43rpx;
	    background: #1E9FFF;
	    border-radius: 22rpx;
	    border: 0px;
	    color: #fff;
	    margin-right: 28rpx;
		line-height: 43rpx;
		text-align: center;
	}
	.product {
	    padding: 0 0.4rem;
	}
	.ul {
	    list-style-type: none;
	}
	
	.product .li {
	    padding: 14rpx;
	    background: #fff;
	    border-radius: 9rpx;
	    overflow: hidden;
	    margin-top: 23rpx;
	}

	.closed {
	    width: 63rpx;
	    height: 21rpx;
	    display: inline-block;
	    vertical-align: top;
	    margin-left: 580rpx;
	}
	.resolved {
	    width: 147rpx;
	    height: 21rpx;
	    display: inline-block;
	    vertical-align: middle;
	    margin-left: 580rpx;
	}
	.product .li .tit {
	    width: 457rpx;
	    height: 140rpx;
	    overflow: hidden;
	    float: right;
	}
	.attestation {
	    width: 84rpx;
	    height: 35rpx;
	    display: inline-block;
	    vertical-align: middle;
	    margin: -3rpx 35rpx 0 0;
	}
	.product .li .tit .h2 {
	    font-size: 24rpx;
	    color: #333333;
	    padding: 4rpx 0;
	    margin-bottom: 4rpx;
	}
	
	.product .h2 {
	    padding-top: 23rpx;
	    font-size: 28rpx;
	    color: #333333;
	    line-height: 28rpx;
	}
	.nowrap {
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	 .h2  {
	    font-size: 100%;
	    font-weight: normal;
	}
	.product .li .tit .b {
	    overflow: hidden;
	    margin-top: 17rpx;
	}
	.product .li .tit .btn {
	    float: right;
		display: flex;
	}
	.btn-close {
	    width: 82rpx;
	    font-size: 11px;
	    height: 43rpx;
	    background: #029e9d;
	    border-radius: 22rpx;
	    border: 0px;
	    color: #fff;
	    margin-left: 18.2rpx;
		text-align: center;
		line-height: 43rpx;
	}
	.mb {
	    font-size: 21rpx;
	    color: #c0c1cc;
	    overflow: hidden;
	    padding-top: 22rpx;
	    padding-bottom: 22rpx;
	}
	.mb .span {
	    float: left;
	}
	.mb .em {
	    float: right;
	}
	.tag-item {
	    height: 43rpx;
	    display: inline-block;
	    justify-content: center;
	    background-color: rgba(229, 245, 245, .7);
	    border-radius: 28rpx;
	    margin-right: 19rpx;
	    margin-bottom: 7rpx;
	}
	.tag-item-text {
	    font-size: 21rpx;
	    font-family: PingFang;
	    font-weight: 500;
	    color: #029E9D;
	    opacity: 1;
	    line-height: 43rpx;
	    padding-right: 14rpx;
	    padding-left: 14rpx;
	}
	.product .checkbox {
	    font-size: 32rpx;
	    color: #333333;
	    line-height: 32rpx;
	}
	
	.tui-checkbox {
	    width: 0px;
	    height: 0px;
	    background-color: #ffffff;
	    border: solid 1px #dddddd;
	    -webkit-border-radius: 50%;
	    border-radius: 50%;
	    font-size: 56rpx;
	    margin: 0;
	    padding: 0;
	    position: relative;
	    right: 55rpx;
	    display: inline-block;
	    vertical-align: top;
	    cursor: default;
	    -webkit-appearance: none;
	    -webkit-user-select: none;
	    user-select: none;
	    -webkit-transition: background-color ease 0.1s;
	    transition: background-color ease 0.1s;
	 }
	.fixed-set {
	    position: fixed;
	    bottom: 0	;
	    left: 50%;
	    width: 100%;
	    margin-left: -370rpx;
	    background: #fff;
	    height: 120rpx;
	    z-index: 100;
	    border-bottom: solid 1px grey;
	}
	.fixed-checkbox {
	    width: 0px;
	    height: 0px;
	    background-color: #ffffff;
	    border: solid 1px #dddddd;
	    -webkit-border-radius: 50%;
	    border-radius: 50%;
	    font-size: 56rpx;
	    margin: 0;
	    padding: 0;
	    position: relative;
	   left: 21rpx;
	   bottom: 12rpx;
	    /* top: 32rpx; */
	    display: inline-block;
	    vertical-align: top;
	    cursor: default;
	    -webkit-appearance: none;
	    -webkit-user-select: none;
	    user-select: none;
	    -webkit-transition: background-color ease 0.1s;
	    transition: background-color ease 0.1s;
	}
	.fixed-set .tit {
	    font-size: 25rpx;
	    position: absolute;
	    top: 23rpx;
	    left: 70rpx;
	}
	.fixed-set .fixed-btn {
	    position: absolute;
	    top: 21rpx;
	    left: 280rpx;
		display: flex;
	}
	.fixed-set .btn-set {
	    width: 105rpx;
	    font-size: 12px;
	    height: 43rpx;
	    background: orange;
	    border-radius: 22rpx;
	    border: 0px;
	    color: #fff;
	    margin-right: 28rpx;
	}
	.my .mt {
	    background: url(https://m.nocexpo.com/statics/js/modules/h5/img/img15.jpg) no-repeat;
	    background-size: 100% auto;
	    overflow: hidden;
	    margin-bottom: 28rpx;
	    background-color: #fff;
	    height: auto;
	}
	.hint {
		text-align: center;
		padding: 15px 0px;
		color: $text-color-grey;
		font-size: $font-size-min;
	}
	.scroll-view {
	    height: calc(100vh - 10rpx);
	}
	image {
		width: 100%;
	}
	.buyersVideo .tabs {
	    padding: 0px 20rpx;
	    border-bottom: 1px solid #EBEBEB;
	    box-shadow: none;
		display: flex;
		
	}
	
	.connaught-style .tabs {
	    height: 100rpx;
		line-height: 100rpx;
	    display: flex; 
		justify-content:space-around;
	    background-color: #ffffff;
	    position: fixed;
	    top: 0px;
	    left: 0px;
	    width: 94%;
	    z-index: 35;
	}
	.buyersVideo .tabs .item {
	    padding: 0px 20rpx;
	}
	.connaught-style .tabs .item {
	    font-size: 15px;
	    text-align: center;
	    position: relative;
	}
	.tabs .item .span {
	    position: absolute;
	    height: 4rpx;
	    border-radius: 2rpx;
	}
	.tabs .item .span {
	    width: 50%;
	    left: 25%;
	    /* bottom: -26rpx; */
	}
	.connaught-style .tabs .item.active {
	    color: #019d9d;
	}
	.connaught-style .tabs .item.active .span {
	    background-color: #019d9d;
	}
	.buyersVideo .live-broadcast {
		background-color:#F7F7F7;
	    padding: 80rpx 20rpx 0;
	}
	.buyersVideo .live-broadcast .item {
	    flex-wrap: nowrap;
	    padding: 20rpx;
	    align-items: flex-start;
	    justify-content: flex-start;
	    background-color: #ffffff;
	    box-shadow: 0px 0.06rem 0.26rem 0px rgba(132, 145, 167, 0.12);
	    position: relative;
		display: flex;
		height: 215rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin-top: 30rpx;
	}
	.good-info{
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		height: 46rpx;
		font-family: PingFang SC, PingFang SC;
		color: #2E2D2D;
		margin-left: 20rpx;
		// margin-top: 40rpx;
		
		.status{
			    position: absolute;
			    right: -6px;
			    top: 17rpx;
		}
	}
	.caigou{
		font-weight: 600;
		font-size: 30rpx;
	}
	.bq-list{
		display: flex;
		flex-wrap: wrap;
		height: 45rpx;
		overflow: hidden;
		margin-top: 10rpx;
	}
	.biaoqian{
	/* 	padding: 0 17rpx; */
		margin: 0 20rpx 16rpx 0;
		height: 48rpx;
		background-color: #f2f3f5;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 24rpx;
		color: #5C5C5C;
		line-height: 48rpx;
		text-align: center;
	}
	.ID{
		margin-top: 14rpx;
		color: #A1A0A0;
	}
	.createAt{
		margin-top: 25rpx;
		color: #A1A0A0;
	}
	.blue{
		width: 6rpx;
		    height: 26rpx;
		    background: #00b7b3;
		    border-radius: 0rpx 200rpx 200rpx 0rpx;
		    content: '';
		    left: 0px;
		    top: 30rpx;
		    position: absolute;
	}
	.tupian{
		width: 34px;
		height: 16px;
		background: #00b7b3;
		content: '';
		left: 20rpx;
		top: 30rpx;
		position: absolute
	}
	.renzheng{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.rightImg {
		height: 48rpx;
	}
	.buyersVideo .live-broadcast .item .good-info .btn .downNews {
		width: 112rpx;
		font-size: 26rpx;
		height: 56rpx;
		line-height: 56rpx;
		/* background: #029e9d; */
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		border: 1px solid #00AAA6;
		color: #00AAA6;
		margin-left: 30rpx;
		text-align: center;
		vertical-align: middle;
		background-color: white;
		border-color: #00AAA6;
	}
	.buyersVideo .live-broadcast .item .good-info .btn .delNews {
		width: 112rpx;
		font-size: 26rpx;
		height: 56rpx;
		line-height: 56rpx;
		/* background: #029e9d; */
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		border: 1px solid #00AAA6 ;
		color: #00AAA6;
		margin-left: 30rpx;
		text-align: center;
		vertical-align: middle;
		background-color: white;
		border-color: #00AAA6;
	}
	.tu{
		width:324rpx;
		height:256rpx;
		margin: 100rpx auto;
		position: fixed;
		top: 10%;
		left: 27%;
	}
	.tu1{
		width:324rpx;
		height:256rpx;
		margin: 100rpx auto;
		position: fixed;
		top: 34%;
		left: 32%;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFangSC-Regular;
		font-weight: normal;
		color: #A1A0A0;
	}
	.tu3{
		width: 320rpx;
		height: 76rpx;
		line-height: 76rpx;
		text-align: center;
		color: white;
		font-size: 28rpx;
		background: linear-gradient(180deg, #54D6D2 0%, #00AAA6 100%);
		border-radius: 38rpx 38rpx 38rpx 38rpx;
		opacity: 1;
		position: fixed;
		top: 48%;
		left: 28%;
	}
</style>